<template>
	<div id="level"></div>
</template>

<script>
	export default {
		data() {
			return {
				level: '',
				color:["#8d7fec","#5085f2","#e75fc3","#f87be2","#f2719a","#fca4bb"],
				m2R2Data: [],
			}
		},
		mounted() {
			this.getData();
			this.draw();
		},
		methods: {
			getData(){
				this.$http.get(this.$api.userGrade).then(res => {
					res.data.forEach((item, index) => {
						if(item.level == 0){
							this.m2R2Data.push({
								value: item.num,
								legendname: 'Lv0 初级会员',
								name: 'Lv0 初级会员',
								itemStyle: {
									color: this.color[index]
								}
							});
						}
						if(item.level == 1){
							this.m2R2Data.push({
								value: item.num,
								legendname: 'Lv1 一级会员',
								name: 'Lv1 一级会员',
								itemStyle: {
									color: this.color[index]
								}
							});
						}
						if(item.level == 2){
							this.m2R2Data.push({
								value: item.num,
								legendname: 'Lv2 二级会员',
								name: 'Lv2 二级会员',
								itemStyle: {
									color: this.color[index]
								}
							});
						}
						if(item.level == 3){
							this.m2R2Data.push({
								value: item.num,
								legendname: 'Lv3 三级会员',
								name: 'Lv3 三级会员',
								itemStyle: {
									color: this.color[index]
								}
							});
						}
						if(item.level == 4){
							this.m2R2Data.push({
								value: item.num,
								legendname: 'Lv4 四级会员',
								name: 'Lv4 四级会员',
								itemStyle: {
									color: this.color[index]
								}
							});
						}
						if(item.level == 5){
							this.m2R2Data.push({
								value: item.num,
								legendname: 'Lv5 五级会员',
								name: 'Lv5 五级会员',
								itemStyle: {
									color: this.color[index]
								}
							});
						}
					});
					this.draw();
				});
			},
			draw() {
				this.level = this.$echarts.init(document.getElementById('level'));
				this.level.setOption({
					tooltip: {
						trigger: 'item',
						formatter: function(parms) {
							var str = parms.seriesName + "</br>" +
								parms.marker + "" + parms.data.legendname + "</br>" +
								"数量：" + parms.data.value + "</br>" +
								"占比：" + parms.percent + "%";
							return str;
						}
					},
					legend: {
						orient: 'vertical',
						left: '80%',
						align: 'left',
						top: 'middle',
						textStyle: {
							color: '#8C8C8C'
						},
						height: 300
					},
					series: [{
						name: '用户等级占比',
						type: 'pie',
						center: ['35%', '50%'],
						radius: ['40%', '65%'],
						clockwise: false, //饼图的扇区是否是顺时针排布
						avoidLabelOverlap: true,
						label: {
							normal: {
								show: true,
								position: 'outter',
								formatter: function(parms) {
									return parms.data.legendname
								}
							}
						},
						labelLine: {
							show: false,
							normal: {
								length: 10,
								length2: 10,
								smooth: false,
							}
						},
						data: this.m2R2Data
					}]
				})
			}
		}
	}
</script>

<style scoped>
	#level {
		width: 100%;
		height: 100%;
	}
</style>
